<!-- 禁止拖拽遮罩层 -->
<template>
    <div v-if="draggableDisabled.status" class="edit-main-disable-drag-mark">
        {{ draggableDisabled.text || '不可放置' }}
    </div>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { useEditStore } from '@/store'
import useWidget from '@/libs/edit/widgetData'
import useWidgetDraggable from '@/libs/edit/widgetDraggable'
import testWidgetTypeAdd from '@/libs/edit/testWidgetTypeAdd'
export default defineComponent({
    name: 'EditMainDisableDragMark',
    setup() {
        const editStore = useEditStore()

        const {
            widgetList
        } = useWidget()

        const {
            draggableWidget
        } = useWidgetDraggable()

        const pageType = computed(() => editStore.pageType)

        const draggableDisabled = computed(() => {
            const testData = testWidgetTypeAdd({
                widgetList: widgetList.value,
                widgetTypes: draggableWidget.value.from === 'template' ? [draggableWidget.value.widgetType] : [],
                pageType: pageType.value
            })
            return {
                status: !testData.status,
                text: testData.text
            }
        })

        return {
            draggableDisabled
        }
    }
})
</script>

<style lang="less" scoped>
@import './edit-main-disable-drag-mark.less';
</style>